<%--
  Created by IntelliJ IDEA.
  User: SXT
  Date: 2020/6/30
  Time: 9:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理页面</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <%--引入easyui主题的css样式--%>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <%--引入easyui中图标集的css样式--%>
    <link rel="stylesheet" href="easyui/themes/icon.css">
    <%--引入demo.css--%>
    <link rel="stylesheet" href="easyui/themes/demo.css">
    <%--引入jq中js文件  注意：先引入jq中js在引入easyui中js--%>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <%--引入easyui中核心js文件--%>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

          $(function () {
              $('#dg').datagrid({
                  url:'role/selectRoleController',
                  pagination:true,//设置分页栏展示
                  rownumbers:true,//设置行号显示
                  pageSize:5,//设置size的初始大小
                  pageList:[5,10,15,20],// 设置每一页显示条数列表
                  toolbar:"#tb",
                  columns:[[
                      {field:'rid',title:'角色编号',width:100,align:'center'},
                      {field:'rname',title:'角色名称',width:100,align:'center'},
                      {field:'rdesc',title:'角色描述',width:300,align:'center'}

                  ]]
              });
          })

        //添加角色
          var url="";

        function newRole() {
            $("#dlg").dialog('open').dialog('center').dialog('setTitle','添加角色');

            $("#fm").form('clear');

            qksaveRole();

            url="role/insertRoleController";

        }

        //提交表单实现
        function saveRole() {
            var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);

            var mids="";
            for (var i in nodes){
                if (mids!="")mids+=",";
                mids+=nodes[i].id;
            }
            console.log(mids);
            $.post(url,$("#fm").serialize()+"&mids="+mids,function (result) {
                if (result>0){
                    $("#dlg").dialog("close")

                    $("#dg").datagrid("reload")
                }else {
                    $.messager.alert("提示","添加失败","info");
                }
            })
        }

        //清空勾选的
        function qksaveRole() {
            var nodes = $('#tt').tree('getChecked');
            for (var i in nodes){
                $('#tt').tree('uncheck', nodes[i].target);
            }

        }

        //修改角色
        function editRole() {
              var arr = $("#dg").datagrid('getSelected');
              if (arr){
                  $("#dlg").dialog('open').dialog('center').dialog('setTitle',"修改角色")

                  $("#fm").form("load",arr);

                  $.post("role/selectRoleMenu",{rid:arr.rid},function (result) {

                      for (var i in result){
                          //勾选树形实现
                          var node = $('#tt').tree('find', result[i]);
                          $('#tt').tree('check', node.target);
                      }
                  })

                    url="role/updateRole?rid="+arr.rid;

              }else {
                  $.messager.alert("提示","请选择要修改的数据","info")
              }
        }

        //删除角色
        function removeRole() {
            var arr = $("#dg").datagrid("getSelected");
            if (arr){
                $.messager.confirm('是否删除','您确定要删除该数据吗?',function (r) {
                    if (r){
                        $.post("role/deleteRole",{rid:arr.rid},function (result) {
                            if (result>0){
                                $("#dg").datagrid("reload");
                            }else {
                                $.messager.alert('提示','删除失败','error');
                            }
                        })
                    }
                })
            }else {
                $.messager.alert('提示','请选择要删除的数据','info');
            }

        }
    </script>
</head>
<body>


<div style="width: 800px;height: 600px" class="easyui-panel" title="角色管理">
    <div style="width: 750px;height: 400px;border: 0px solid red;margin: 0px auto;margin-top: 30px">

        <table id="dg" style="width: 750px;height: 400px"></table>

        <%--工具栏设置--%>
        <div id="tb">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newRole()">添加角色</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRole()">编辑角色</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeRole()">删除角色</a>

        </div>
    </div>
</div>

<%--添加角色的对话框--%>
<div id="dlg" class="easyui-dialog" style="width:400px;height: 600px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
        <h3>Role Information</h3>
        <div style="margin-bottom:10px">
            <input name="rname" class="easyui-textbox" required="true" label="角色名称:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="rdesc" class="easyui-textbox" required="true" label="角色描述:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            菜单选择：
            <ul id="tt" class="easyui-tree" data-options="url:'menu/selectMenuController3',method:'get',animate:true,checkbox:true"></ul>
        </div>

    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveRole()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>

</body>
</html>
